<template>
    <el-dialog v-model="show" title="采购验收" width="45%" align-center @close="handleClose">
        <el-row>
            <el-col class="flex" :span="6">
                <div class="label">
                    申请人：
                </div>
                <div>{{ props.initList.applyName }}</div>
            </el-col>
            <el-col class="flex" :span="6">
                <div class="label">
                    申请日期：
                </div>
                <div>{{ props.initList.applyDate }}</div>
            </el-col>
            <el-col class="flex" :span="6">
                <div class="label">
                    品名及规格：
                </div>
                <div>{{ props.initList.specsDetail }}</div>
            </el-col>
            <el-col class="flex" :span="6">
                <div class="label">
                    采购数量：
                </div>
                <div>{{ props.initList.purchaseNumber }}</div>
            </el-col>
        </el-row>

        <el-row>
            <el-col class="flex" :span="6">
                <div class="label">
                    供应商：
                </div>
                <div>{{ props.initList.supplyFactoryName }}</div>
            </el-col>
            <el-col class="flex" :span="6">
                <div class="label">
                    当前入库数量：
                </div>
                <div>{{ props.initList.inNumber }}</div>
            </el-col>
            <el-col class="flex" :span="6">
                <div class="label">
                    未入库数量：
                </div>
                <div>{{ Number(props.initList.purchaseNumber) - Number(props.initList.inNumber) }}</div>
            </el-col>
        </el-row>

        <el-row>
            <el-col class="flex" :span="6">
                <div class="label">
                    抽查总数：
                </div>
                <div>{{ props.dataList.checkTotal }}</div>
            </el-col>
            <el-col class="flex" :span="6">
                <div class="label">
                    合格数：
                </div>
                <div>{{ props.dataList.qualifiedNumber }}</div>
            </el-col>
            <el-col class="flex" :span="6">
                <div class="label">
                    不合格数：
                </div>
                <div>{{ props.dataList.notQualifiedNumber }}</div>
            </el-col>
            <el-col class="flex" :span="6">
                <div class="label">
                    预计合格率：
                </div>
                <div> {{ props.dataList.qualificationRate }} </div>
            </el-col>
        </el-row>



        <el-form ref="formRef" :model="form" label-width="110px" :rules="rules">
            <el-row>
                <el-col :span="6">
                    <el-form-item label="本次抽查数：" prop="checkNumber">
                        <el-input v-model="form.checkNumber" type="number" :max="Number(props.initList.inNumber)"
                            placeholder="请输入本次抽查数" :min="0" />
                    </el-form-item>
                </el-col>
                <el-col class="flex" :span="6">
                    <div class="label">
                        合格数：
                    </div>
                    <div v-if="form.notQualifiedNumber && form.checkNumber">{{ Number(form.checkNumber) -
                        Number(form.notQualifiedNumber) }}</div>
                </el-col>
                <el-col :span="6">
                    <el-form-item label="不合格数：" prop="notQualifiedNumber">
                        <el-input v-model="form.notQualifiedNumber" type="number" :max="Number(form.checkNumber)"
                            :min="0" placeholder=" 请输入不合格数" />
                    </el-form-item>
                </el-col>
                <el-col class="flex" :span="6">
                    <div class="label">
                        抽查合格率：
                    </div>
                    <div v-if="form.notQualifiedNumber && form.checkNumber"> {{ qualificationRate }} </div>
                </el-col>
            </el-row>
        </el-form>

        <template #footer>
            <div class="dialog-footer">
                <el-button @click="handleClose">取 消</el-button>
                <el-button type="primary" @click="handleSubmit(formRef)">确 认</el-button>
            </div>
        </template>
    </el-dialog>
</template>

<script setup lang="ts">
import { addPurchaseAcceptanceApi } from '@/api/sj/purchaseManagement/toBeStored/index'
import type { ComponentSize, FormInstance, FormRules } from 'element-plus'

const { proxy } = getCurrentInstance() as ComponentInternalInstance;
const props = defineProps(['visible', 'initList', 'dataList']);
const emits = defineEmits(['submit', 'close']);

const show = ref(false);

watch(() => props.visible, async (newValue) => {
    show.value = newValue
    if (newValue) {
    }
}, { deep: true });

const form = reactive({
    checkNumber: '',
    notQualifiedNumber: '',
});

const formRef = ref<FormInstance>();

const rules = reactive<FormRules>({
    checkNumber: [
        { required: true, message: '请输入本次抽查数', trigger: 'blur' },
    ],
    notQualifiedNumber: [
        { required: true, message: '请输入不合格数', trigger: 'blur' },
    ],
});

// 监听 inputValue 变化，实时检查是否超过最大值
watch(form, (newValue) => {
    console.log(newValue, '12312');

    if (newValue.checkNumber && Number(newValue.checkNumber) > (Number(props.initList.inNumber) - Number(props.dataList.checkTotal))) {
        form.checkNumber = String(Number(props.initList.inNumber) - Number(props.dataList.checkTotal));
    }

    if (newValue.notQualifiedNumber && Number(newValue.notQualifiedNumber) > Number(form.checkNumber)) {
        form.notQualifiedNumber = form.checkNumber;
    }

    if (newValue && Number(newValue.checkNumber) < 0) {
        form.checkNumber = '0';
    }

    if (newValue && Number(newValue.notQualifiedNumber) < 0) {
        form.notQualifiedNumber = '0';
    }
}, { deep: true });


/** 合格率 */
const qualificationRate = computed(() => {
    if (!form.checkNumber || !form.notQualifiedNumber) return '0%';

    const checkNumber = Number(form.checkNumber);
    const notQualifiedNumber = Number(form.notQualifiedNumber);

    if (checkNumber === 0) return '0%';

    const rate = ((checkNumber - notQualifiedNumber) / checkNumber) * 100;
    return `${rate.toFixed(2)}%`;
});

const handleSubmit = async (formEl: FormInstance | undefined) => {
    if (!formEl) return
    await formEl.validate(async (valid, fields) => {
        if (valid) {
            console.log('submit!')
            try {

                if (!form.checkNumber || !form.notQualifiedNumber) return '0%';

                const checkNumber = Number(form.checkNumber);
                const notQualifiedNumber = Number(form.notQualifiedNumber);

                if (checkNumber === 0) return '0%';

                const rate = ((checkNumber - notQualifiedNumber) / checkNumber) * 100;

                const { code } = await addPurchaseAcceptanceApi({
                    checkNumber: form.checkNumber,
                    notQualifiedNumber: form.notQualifiedNumber,
                    qualifiedNumber: Number(form.checkNumber) -
                        Number(form.notQualifiedNumber),
                    qualificationRate: `${rate.toFixed(2)}`,
                    supplyFactoryId: props.initList.supplyFactoryId,
                    purchaseOrderId: props.initList.id
                })

                if (code == 200) {
                    proxy?.$modal.msgSuccess('操作成功');
                    emits('submit', true);

                    handleClose();
                }
            } catch (error) {
                console.log(error, '12312');
            }
        } else {
            console.log('error submit!', fields)
        }
    })

};


const handleClose = () => {
    formRef.value?.resetFields();
    emits('close');
};

onMounted(() => {
})
</script>

<style lang="scss" scoped>
.label {
    height: 32px;
    line-height: 32px;
    font-weight: 700;
    display: inline-flex;
    justify-content: flex-end;
    align-items: flex-start;
    padding: 0 12px 0 0;
    box-sizing: border-box;
    flex: 0 0 auto;
    font-size: var(--el-form-label-font-size);
    color: var(--el-text-color-regular);
    width: 110px;
}

.flex {
    display: flex;
    align-items: center;
}

.el-form-item--default {
    margin-bottom: 0;
}

.el-row {
    margin-bottom: 20px;
}
</style>